<template>
  <a-modal v-model:visible="visible" :ok-text="'确定'" :cancel-text="'取消'" :width="'60%'" title="发布PDK需求" @cancel="handleCancel" @ok="handleOk">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="需求名称：" v-bind="validateInfos.name">
        <a-textarea v-model:value="formState.name" show-count :maxlength="1000" />
      </a-form-item>
      <a-form-item label="需求分类：" v-bind="validateInfos.desc">
        <a-select v-model:value="formState.desc" style="width: 100%" placeholder="请选择需求分类" :options="options"></a-select>
      </a-form-item>
      <a-form-item label="截至日期：" placeholder="开始日期-结束日期" :format="dateFormat" v-bind="validateInfos.dataTime">
        <a-range-picker v-model:value="formState.dataTime" />
      </a-form-item>
      <a-form-item label="应用方向：" v-bind="validateInfos.direction">
        <a-input v-model:value="formState.direction" placeholder="请输入应用方向" />
      </a-form-item>
      <a-form-item label="核心指标：" v-bind="validateInfos.indicators">
        <a-textarea v-model:value="formState.indicators" show-count :maxlength="1000" />
      </a-form-item>
      <!-- <a-form-item label="相关资料" v-bind="validateInfos.desc"> </a-form-item> -->
      <a-form-item label="联系人：" v-bind="validateInfos.contacts">
        <a-input v-model:value="formState.contacts" placeholder="请输入联系人" />
      </a-form-item>
      <a-form-item label="联系电话：" v-bind="validateInfos.phone">
        <a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
      </a-form-item>
      <a-form-item label="单位名称：" v-bind="validateInfos.company">
        <a-input v-model:value="formState.company" placeholder="请输入单位名称" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, toRaw, defineEmits, defineExpose } from "vue"
import { Form } from "ant-design-vue"
import type { Dayjs } from "dayjs"
const useForm = Form.useForm
const emit = defineEmits(["onSuccFn", "onFail"])
const visible = ref(false)
const dateFormat = "YYYY/MM/DD"
const formState = reactive({
  name: ref(),
  desc: ref(),
  dataTime: ref<[Dayjs, Dayjs]>(),
  direction: ref(),
  indicators: ref(),
  contacts: ref(),
  phone: ref(),
  company: ref(),
})
const rulesRef = reactive({
  name: [{ required: true, message: "请输入需求名称" }],
  desc: [{ required: true, message: "请输入需求分类" }],
  dataTime: [{ required: true, message: "请选择日期" }],
  direction: [{ required: true, message: "请输入应用方向" }],
  indicators: [{ required: true, message: "请输入核心指标" }],
  contacts: [{ required: true, message: "请输入联系人" }],
  phone: [{ required: true, message: "请输入联系电话" }],
  company: [{ required: true, message: "请输入单位名称" }],
})
const { resetFields, validate, validateInfos } = useForm(formState, rulesRef, {
  onValidate: (...args) => console.log(...args),
})
const labelCol = ref({ style: { width: "100px" } })
const wrapperCol = ref({ span: 22 })
const options = reactive([
  {
    value: "1",
    label: "测试",
  },
])
const handleOk = () => {
  validate()
    .then(() => {
      visible.value = false
      console.log(toRaw(formState))
      emit("onSuccFn", toRaw(formState))
    })
    .catch(err => {
      console.log("error", err)
    })
}
const handleCancel = () => {
  visible.value = false
}
const visibleHide = () => {
  visible.value = true
}

defineExpose({
  visibleHide,
})
</script>
